<script setup>
import { computed, defineProps } from 'vue'
const props = defineProps({
  // 加密信息
  info: {
    type: [String, Number]
  },
  // 加密类型 name email phone idCard bankCard
  type: {
    type: String
  },
  // 是否显示toolTip
  toolTipDisabled: {
    type: Boolean,
    default: false
  },
  // 是否是详情页
  isDetail: {
    type: Boolean,
    default: false
  }
})

const isNull = computed(() => {
  return props.info === null || props.info === ''
})

/**
 * 规则
 *  1: 全脱
 *  2：脱姓
 *  3：脱敏中间一个字
 *  4：脱敏中间2个字
 *  5：脱敏前二后二
 * @param name 姓名
 * @returns {*} 脱敏名称
 */
const nameEncoded = (name = []) => {
  const length = name.length
  if (length === 1) name = encodedUtils(0, 1, name)
  if (length === 2) name = encodedUtils(0, 1, name)
  if (length === 3) name = encodedUtils(1, 2, name)
  if (length === 4) name = encodedUtils(1, 3, name)
  if (length > 4) name = encodedUtils(2, length - 2, name, true)
  return name
}

/**
 * 脱敏@前两位
 * @param email
 * @returns {*}
 */
const emailEncoded = (email) => {
  const emailArr = email.split('@') || []
  const emailStr = emailArr[0]
  emailArr[0] = encodedUtils(emailStr.length - 2, emailStr.length, emailStr)
  return emailArr.join('@')
}
/**
 * 脱敏手机前三后四 座机533****
 * @param phone
 * @returns {*}
 */
const phoneEncoded = (phone) => {
  if (!phone) return phone
  return phone.length === 11 ? phone.replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3') : phone.replace(/([\d-]{2,})([\d-]{4})/, '$1****')
}
/**
 * 证件号后四
 * @param idCard
 * @returns {*}
 */
const idCardEncoded = (idCard = []) => {
  idCard = encodedUtils(0, idCard.length - 4, idCard)
  return idCard
}
/**
 * 银行卡前4后四
 * @returns {*}
 * @param bankCard
 */
const bankCardEncoded = (bankCard = []) => {
  bankCard = encodedUtils(4, bankCard.length - 4, bankCard)
  return bankCard
}

/**
 * 加密工具类
 * @param start 开始加密索引
 * @param end 结束加密索引
 * @param str 加密字符传
 * @param isSpec 特殊规则判断
 * @returns {string} 加密后字符传
 */
function encodedUtils (start, end, str, isSpec = false) {
  const startStr = str.substring(0, start)
  const endStr = str.substring(end, str.length)
  let length = end - start > 0
  if (length < 0) length = -length
  if (isSpec) length = 3
  const middleStr = new Array(length).fill('*').join('')
  return startStr + middleStr + endStr
}

const handle = {
  name: nameEncoded(props.info),
  email: emailEncoded(props.info),
  phone: phoneEncoded(props.info),
  idCard: idCardEncoded(props.info),
  bankCard: bankCardEncoded(props.info)
}

const desensitizationInfo = computed(() => {
  if (isNull.value) return ''
  return handle[props.type]
})
</script>

<template>
  <span>
    <el-tooltip
      v-if="!isDetail"
      :content="info"
      :disabled="toolTipDisabled || isNull"
      class="item"
      effect="dark"
      placement="top">
      <span>{{desensitizationInfo}}</span>
    </el-tooltip>
    <span v-else>
      <span v-if="isShow">
        {{desensitizationInfo}}
        <span @click="handleShowInfo">
          <svg-icon v-if="!isNull" class="show-info" icon="icon-yanjing"></svg-icon>
        </span>
      </span>
      <span v-else>
        {{info}}
        <span @click="handleShowInfo">
          <svg-icon class="show-info" icon="icon-yanjing1"></svg-icon>
        </span>
      </span>
    </span>
  </span>
</template>

<style scoped lang="scss">

</style>
